import React, { useState } from 'react';
import { List, InputItem, Toast } from 'antd-mobile';
import { createForm } from 'rc-form';
import { updatePwd } from 'ser/actions';
import { history } from 'umi';
import SelfHead from 'components/common/selfHead';
import EYE from 'static/icon_eye.png';
import EYELASH from 'static/icon_eyelash.png';
import './index.less';

function PassWord(props) {
  const { form } = props;
  const { getFieldProps, validateFields, getFieldError } = form;
  const [flag1, setFlag1] = useState(false);
  const [flag2, setFlag2] = useState(false);
  const [flag3, setFlag3] = useState(false);
  function handleClick() {
    validateFields()
      .then(async value => {
        if (value.oldPassWord === value.newPassWord) {
          Toast.info('新密码与旧密码不能相同，请重新输入', 1);
          return false;
        }
        if (value.newPassWord !== value.confirmPassWord) {
          Toast.info('两次输入的新密码不同，请重新输入', 1);
          return false;
        }
        const res = await updatePwd({
          pswd: value.oldPassWord,
          newPswd: value.newPassWord,
        });
        if (res.code === 0) {
          Toast.info(res.msg, 1);
          setTimeout(() => {
            history.push('/');
          }, 1000);
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
  const validate = (rule, val, callback) => {
    let value = val.replace(/ /g, '');
    if (value && value.length >= 6) {
      callback();
    } else if (value.length === 0) {
      callback(new Error('密码不能为空'));
    } else {
      callback(new Error('请填写正确的密码'));
    }
  };
  return (
    <div className="passWord">
      <SelfHead title="修改密码" />
      <div className="passWord-body">
        <div className="passWord-form">
          <List className="self-list">
            <div className="passWord-title">旧密码</div>
            <InputItem
              {...getFieldProps('oldPassWord', {
                rules: [{ validator: validate }],
              })}
              error={!!getFieldError('oldPassWord')}
              onErrorClick={() => {
                Toast.info(getFieldError('oldPassWord'), 1);
              }}
              type={flag1 ? 'text' : 'password'}
              extra={<img src={flag1 ? EYELASH : EYE} className="eye" />}
              onExtraClick={() => setFlag1(!flag1)}
              clear
              placeholder="请输入密码"
            ></InputItem>
            <div className="passWord-title">新密码</div>
            <InputItem
              {...getFieldProps('newPassWord', {
                rules: [{ validator: validate }],
              })}
              error={!!getFieldError('newPassWord')}
              onErrorClick={() => {
                Toast.info(getFieldError('newPassWord'), 1);
              }}
              type={flag2 ? 'text' : 'password'}
              extra={<img src={flag2 ? EYELASH : EYE} className="eye" />}
              onExtraClick={() => setFlag2(!flag2)}
              clear
              placeholder="请输入密码"
            ></InputItem>
            <InputItem
              {...getFieldProps('confirmPassWord', {
                rules: [{ validator: validate }],
              })}
              error={!!getFieldError('confirmPassWord')}
              onErrorClick={() => {
                Toast.info(getFieldError('confirmPassWord'), 1);
              }}
              type={flag3 ? 'text' : 'password'}
              extra={<img src={flag3 ? EYELASH : EYE} className="eye" />}
              onExtraClick={() => setFlag3(!flag3)}
              clear
              placeholder="请再次输入密码"
            ></InputItem>
            <div className="passWord-tip">不少于6位数字</div>
          </List>
        </div>
        <div className="passWord-btn" onClick={handleClick}>
          确认修改
        </div>
      </div>
    </div>
  );
}
export default createForm()(PassWord);
